<template>

	<div id="root" style="background-color: aqua">

		<!--支持事件的comA-->
		<component-a v-on:comAtodo="comAtodo"></component-a>

		<p>hello word</p>
		<br>
		<p v-bind:title="msg"></p>
		<br>
		<p v-text="msg"></p>
		<br>
		<p v-html="msg"></p>
		<br>
		<p v-for="(item,index) in listDemo" v-text="item" v-bind:key="index">{{index}}</p>
		<br>

		{{num+1}}
		<br>
		{{action(12.3)}}
		<ol>
			<li>1a</li>
			<li>2a</li>
			<li>3a</li>
			<li>4a</li>
			<li>5a</li>
		</ol>


		<div id="div-1" class="div-a">
			<button id="btn-1" class="btn-a" @click="show">点我有惊喜!</button>
		</div>


		<div>
			<input type="text" v-on:keydown.esc="ahh" v-model="inputMode">
		</div>

		<comB></comB>


	</div>
</template>


<script>

    import componentA from './componentA'
    import comB from './comB'

    export default {
        components: {
            componentA,
            comB
        },
        data: function () {
            return {
                msg: '<p><a href="www.baidu.com">ssssss</a></p>',
                num: 1,
                action: function (numPara) {
                    return numPara * 100
                },
                listDemo: ["pop", 'push', 'action', 'do', 'lib'],
                inoooo: '请输入信息',
                inputMode: ''
            }
        },
        methods: {
            show: function () {
                alert('==')
            },
            ahh: function () {
                alert('恭喜!🎉 输入正确!✅')
            },
            comAtodo: function (res) {
                this.inputMode = 'OOOOOOO哦哦哦哦哦哦'
                alert('===')
                alert(res)

            }

        }
    }
</script>

<style scoped>
	.foriTem {
		background-color: #090;
	}


</style>